<template>
  <form-item-container
    v-if="permission !== 'H'"
    :id="id"
    :item="item"
    :item-config="itemConfig"
    @select-item="selectItem"
    @delete-item="deleteItem"
    @copy-item="copyItem"
  >
    <a-input
      v-model="formModel"
      :disabled="permission === 'D'"
      :readonly="permission === 'R'"
      :default-value="config.defaultValue"
      :placeholder="config.placeholder"
      :allow-clear="config.allowClear"
      :max-length="config.maxLength"
      :show-word-limit="config.showWordLimit"
      @change="onChange"
    />
  </form-item-container>
</template>

<script lang="ts" setup>
import {
  inject,
  defineModel,
  defineProps,
  defineEmits,
  onMounted,
  computed, watch
} from 'vue';
import { FormPermission } from '@/components/form-design/item-select/config/type';
import {
  PROVIDE_KEY_ACTION_MAP,
  PROVIDE_KEY_EVENT_MAP,
  PROVIDE_KEY_EVENT_BUS, PROVIDE_KEY_FROM_INSTANCE, PROVIDE_KEY_FORM_PERMISSION
} from '@/components/form-design/provide_key';
import FormItemContainer from '@/components/form-design/form-container/container-item/form-item-container.vue';

const formModel = defineModel();

const props = defineProps({
  id: {
    type: String,
    default: () => ''
  },
  item: {
    type: Object,
    default: () => {
    }
  },
  itemConfig: {
    type: Object,
    default: () => {
    }
  },
  config: {
    type: Object,
    default: () => {
    }
  }
});

const formInstance = inject(PROVIDE_KEY_FROM_INSTANCE);

const ACTION_MAP = inject(PROVIDE_KEY_ACTION_MAP);

const EVENT_MAP = inject(PROVIDE_KEY_EVENT_MAP);

const EVENT_BUS = inject(PROVIDE_KEY_EVENT_BUS);

const formPermission = inject(PROVIDE_KEY_FORM_PERMISSION);

const permission = computed<FormPermission>(() => {
  const result = formPermission[props.id];
  if (result) {
    return result;
  }
  return 'E';
});

const emits = defineEmits(['selectItem', 'deleteItem', 'copyItem']);

const selectItem = (value: any) => {
  emits('selectItem', props.item);
};

const deleteItem = (value: any) => {
  emits('deleteItem', props.item);
};

const copyItem = (value: any) => {
  emits('copyItem', props.item);
};

const onChange = (value: string) => {
  if (EVENT_BUS) {
    EVENT_BUS.submitEvent({
      sourceFormId: props.id,
      sourceEventKey: 'change',
      args: value
    });
  }
  if (props.config.onChangeFunction) {
    try {
      const callBack = new Function('value', props.config.onChangeFunction);
      callBack.call(formInstance, value);
    } catch (e) {
      console.error(e);
    }
  }
};

const testAction = (args: any) => {
  console.log('testAction', args);
  formModel.value = 'testAction';
};

/**
 * 注册表单动作
 */
const registerAction = () => {
  if (ACTION_MAP) {
    ACTION_MAP.set(props.id, {
      formLabel: props.itemConfig.label,
      actionList: [
        {
          name: 'test',
          key: 'test',
          args: [],
          result: [],
          action: testAction
        }
      ]
    });
  }
};

/**
 * 注册表单事件
 */
const registerEvent = () => {
  if (EVENT_MAP) {
    EVENT_MAP.set(props.id, {
      formLabel: props.itemConfig.label,
      eventList: [
        {
          name: '表单值变更',
          key: 'change',
          args: []
        }
      ]
    });
  }
};

watch(props.itemConfig, () => {
  registerAction();
  registerEvent();
});

onMounted(() => {
  registerAction();
  registerEvent();
});

</script>

<script lang="ts">
export default {
  name: 'FormItemInput'
};
</script>

<style lang="less" scoped>

</style>